<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伸缩盒模型-缩</title>
    <style>
        .box{
            width: 400px;
            height: 500px;
            border: #888888 1px solid;
            display: flex;
        }
        .box1{
            width: 200px;
            height: 150px;
            border: black 1px solid;
            flex-shrink: 1;
            order: 2;
        }
        .box2{
            width: 300px;
            height: 200px;
            border: black 1px solid;
            flex-shrink: 2;
            order: 3;
            align-self: flex-start;
        }
        .box3{
            width: 200px;
            height: 100px;
            border: black 1px solid;
            flex-shrink: 3;
            order: 1;
        }
    </style>
</head>
<body>
<!--
3. flex-shrink
    缩
        概念: flex-shrink 定义了项目的压缩比例，默认为1，即:如果空间不足，该项目将会缩小。
    收缩项目的计算，略微复杂一点，我们拿一个场景举例:
    例如:
        三个收缩项目，宽度分别为:200px、300px、200px，它们的f1ex-shrink值分别为:1、2、3若想刚好容纳下三个项日，需要总宽度为700px，但日前容器只有400px，还差300px所以每个人都要收缩一下才可以放下，具休收缩的值，这样计算:
        1，计算分母:(200*1)+(300x2)+(200x3) = 1400
    2.计算比例:
        项目一:(200x1)/1400-比例值1
        项日二:(300x2)/1400=比例值2
        项日三:(200x3)/1400=比例值3
        计算最终收缩大小:
            项目三需要收缩:比例值1x300
            项目二需要收缩:比例值2x300
            项目三需要收缩:比例值3x300


3.flex复合属性
        f1ex是复合属性，复合了:flex-grow、flex-shrink、flex-basis 三个属性，默认信为 0 1 auto。
           如果写flex:1 1 auto ,则可简写为:flex:auto
           如果写f1ex:1 1 0  ,则可简写为:flex:1
           如果写flex:0 0 auto ,则可简写为:flex:none
           如果写flex:0 1 auto ,则可简写为:flex:a auto          --即 flex 初始值。
12.项目排序
    order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
13.单独对齐
    通过 al1gn-se1f 属性，可以单独调整某个伸缩项目的对齐方式。
    默认值为 auto，表示继承父元系的al1gn-1tems 属性。
-->
        <div class="box">
            <div class="box1">1</div> <div class="box2">2</div> <div class="box3">3</div>
        </div>
</body>
</html>